<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>页面拖拽搭建示例</title>  
<style>  
    .draggable {  
        width: 100px;  
        height: 100px;  
        background-color: #f00;  
        color: #fff;  
        display: inline-block;  
        margin: 10px;  
        position: absolute;  
        cursor: move;  
        user-select: none; /* 禁止文本选择 */  
    }  
  
    #canvas {  
        width: 800px;  
        height: 600px;  
        border: 1px solid #000;  
        position: relative;  
        margin: 20px auto; /* 居中显示 */  
    }  
</style>  
</head>  
<body>  
  
<div id="canvas">  
    <div class="draggable" id="module1">模块1</div>  
    <div class="draggable" id="module2">模块2</div>  
    <!-- 可以添加更多可拖拽的模块 -->  
</div>  
  
<script>  
    let draggable = null;  
    let offsetX = 0;  
    let offsetY = 0;  
  
    // 监听mousedown事件  
    document.addEventListener('mousedown', function(e) {  
        let target = e.target;  
        if (target.classList.contains('draggable')) {  
            draggable = target;  
            offsetX = e.clientX - target.getBoundingClientRect().left;  
            offsetY = e.clientY - target.getBoundingClientRect().top;  
        }  
    });  
  
    // 监听mousemove事件  
    document.addEventListener('mousemove', function(e) {  
        if (draggable) {  
            let x = e.clientX - offsetX;  
            let y = e.clientY - offsetY;  
            let canvas = document.getElementById('canvas');  
            let canvasRect = canvas.getBoundingClientRect();  
            x = Math.max(0, Math.min(x, canvasRect.width - draggable.offsetWidth));  
            y = Math.max(0, Math.min(y, canvasRect.height - draggable.offsetHeight));  
            draggable.style.left = x + 'px';  
            draggable.style.top = y + 'px';  
        }  
    });  
  
    // 监听mouseup事件  
    document.addEventListener('mouseup', function() {  
        draggable = null;  
    });  
</script>  
  
</body>  
</html>